<template>
  <div class="list-item" @mouseenter="dealWithShowDelete(true)" @mouseleave="dealWithShowDelete(false)"
       :style="{backgroundColor:bgColor}">
    <input type="checkbox" v-model="isChecked"><label>{{ item.text }}</label>
    <button v-show="isShowDeleteButton" class="delete" @click="dealWithDelete">删除</button>
  </div>
</template>

<script>
import {computed, inject, ref} from "vue";

export default {
  name: "Item",

  setup(props) {

    const deleteItemAtIndex = inject("deleteItemAtIndex")
    const setFinishedByIndex = inject("setFinishedByIndex")

    let isShowDeleteButton = ref(false)
    let bgColor = ref("#fff")

    const dealWithShowDelete = (isShow) => {
      isShowDeleteButton.value = isShow;
      bgColor.value = isShow ? "#ddd" : "#fff"

    }
    const dealWithDelete = () => {
      console.log(props);
      console.log("删除：", props.index)
      deleteItemAtIndex(props.index)
    }
    let isChecked = computed({
      get() {
        return props.item.finished
      },
      set(val) {
        setFinishedByIndex(props.index,val)
      }
    })


    return {
      deleteItemAtIndex,
      setFinishedByIndex,
      isShowDeleteButton,
      bgColor,
      isChecked,
      dealWithShowDelete,
      dealWithDelete
    }

  },


  props: {
    item: {
      type: Object,
      required: true
    },

    index: {
      type: Number,
      required: true
    },

  }
}
</script>

<style scoped>
.delete {
  border: none;
  color: white;
  background-color: orange;
}

.delete:hover {
  border: none;
  color: white;
  background-color: red;
}
</style>